[VueJS] 클릭 이벤트 버튼 만들기 및 예제

VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.

클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?

# VueJS 클릭이벤트 만들기

VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.

@click
v-on:click

여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니다. 예를들어 만약 버튼을 클릭시 openNew()라는 새로운 함수를 호출할 경우 아래와 같이 작성할 수 있습니다.

아래는 함수의 정의입니다.

이제 위 버튼을 클릭하면 설정된 함수가 동작할 것입니다. 아래는 클릭이벤트에서 알아두면 좋은 활용 방법과 팁에 대하여 알아봅니다.

# vuejs 클릭 이벤트의 활용

vuejs의 장점은 쉽고 간단한 기능을 많이 제공하는 점입니다. 아래의 키워드는 클릭 이벤트에 추가하여 원하는 기능을 실행하도록 도와줍니다.

• self  //  클릭이벤트가 해당 요소인 경우에만 실행
• once  // 한번만 실행함
• prevent  // event.preventDefault() 와 동일함
• stop  // event.stopPropagation() 과 동일함

그럼 아래에서 하나씩 알아보도록 하죠.

! v-on:click.self

이 방법은 매우 유용한데 내부의 자식 요소들이 존재하는 경우 클릭된 요소가 해당 엘리먼트와 일치하는 경우에만 이벤트에 바인딩된 함수를 호출합니다. 다시 말해 이벤트 버블링 등의 간접적인 클릭 요소가 발생하여 함수 호출이 한 번이 아닌 다수가 일어나는 문제를 방지할 수도 있습니다.

주의할 점은 클릭 영역에 자식 영역이 포함된 경우 당연히 함수가 동작하지 않는다는 점입니다. 즉 self가 아니기 때문이죠. 이런 이유로 클릭 영역의 자식 요소를 포함하는 경우는 사용하지 않는 것이 좋습니다.

! v-on

:click.once이 방법은 만약 클릭이 오직 한 번만 되어야 하는 경우 매우 유용하게 쓸 수 있습니다. 반복해서 클릭되는 일을 방지하므로 이를 다른 코드 구현없이 간단하게 적용할 수 있습니다. 개인적으로 위 4가지 중에서 가장 유용하다고 생각하는 것들 중 하나입니다.

! v-on

:click.preventprevent는 설정된 위치에 따라 다른 동작을 수행합니다. 예를들어 아래의 두 템플릿 코드는 서로 다른 동작을 수행합니다.

! v-on

:click.stopstop을 추가하면 event.stopPropagation()과 동일하게 동작합니다. 이벤트 버블링을 방지할 수 있습니다.

# vuejs 마우스 이벤트 더 알아보기

아래와 같은 이벤트 역시 간단하게 동작합니다. 마우스를 떼거나 누르고 있는 경우... 아니면 왼쪽 오른쪽 마우스 클릭을 수식어를 사용하여 동작하게 할 수도 있습니다. 아래를 봐주세요.

이처럼 VueJS에서는 마우스 이벤트 동작이 매우 간단하고 쉽습니다.